<template>
  <div class="device-node">
    <div class="device-header" @mouseenter="hover = true" @mouseleave="hover = false">
      <div class="device-left" @click="toggle">
        <el-icon class="expand-icon">
          <component :is="expanded ? 'ArrowDown' : 'ArrowRight'" />
        </el-icon>
        <span class="device-name">{{ node.name }}</span>
        <el-tag size="small" :type="tagType(node.nodeType)" class="ml6">{{ node.nodeType }}</el-tag>
      </div>

      <div class="device-actions">
        <!-- <el-button v-show="hover" type="primary" link size="small" @click="$emit('editDevice', node)">
          <el-icon><Edit /></el-icon> 修改
        </el-button> -->
        <el-button
          v-show="hover"
          type="primary"
          link
          size="small"
          @click="openEditDevice(node)"
        >
          <el-icon><Edit /></el-icon> 修改
        </el-button>
        <el-button v-show="hover" type="success" link size="small" @click="openAddAssessment(node)">
          <el-icon><Plus /></el-icon> 新增评估
        </el-button>
      </div>
    </div>

    <transition name="fade">
      <div v-if="expanded" class="device-children">
        <DeviceNode
          v-for="child in node.children"
          :key="child.id"
          :node="child"
          @editDevice="$emit('editDevice', $event)"
          @editSpare="$emit('editSpare', $event)"
        />

        <el-card v-if="node.spareInfos?.length" class="spare-card" shadow="never">
          <template #header><span class="spare-header">备件信息</span></template>
          <el-table :data="node.spareInfos" size="small" border>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="code" label="编码" width="140" />
            <el-table-column prop="stock" label="库存" width="100" />
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                
                <el-button
  type="primary"
  link
  size="small"
  @click="openEditSpare(node, row)"
>
  修改
</el-button>

                <el-button type="success" link size="small" @click="openEditAssessment(row)">编辑评估</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </transition>

    <AssessmentDialog ref="dlg" @refresh="getList" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowDown, ArrowRight, Edit, Plus } from '@element-plus/icons-vue'
import AssessmentDialog from '@/components/sbtz/assessment/AssessmentDialog.vue'
import { listAssessment } from '@/api/sbtz/assessment'

defineOptions({ name: 'DeviceNode' }) // 递归自引用需要名字

const props = defineProps({
  node: { type: Object, required: true }
})

const expanded = ref(false)
const hover = ref(false)

function toggle() {
  expanded.value = !expanded.value
}

function openEditDevice(node) {
  dlg.value.open(node); // 弹出当前组件自己的修改窗口
}
function tagType(type) {
  return { MACHINE: 'primary', MODULE: 'success', COMPONENT: 'warning', PART: 'info' }[type] || 'default'
}

function openEditSpare(device, spare) {
  console.log(device,spare)
  // 拿到当前设备id与备件id
  const assetId = device.id
  const spareId = spare.id

  // 调试看看
  console.log('正在修改备件:', { assetId, spareId })

  // 如果你要打开评估弹窗：
  dlg.value.open({
    assetId,
    spareId
  })

  // 或者如果未来有独立的“备件修改弹窗”，可以换成：
  // spareDlg.value.open({ assetId, spareId })
}


// —— 评估弹窗控制 ——
const dlg = ref(null)
const list = ref([])

function getList() {
  // 如需刷新外层评估列表，保留；不需要可删
  listAssessment().then(res => (list.value = res.rows))
}

function openAddAssessment(node) {
  if (!dlg.value?.open) {
    console.warn('dlg.open 不存在，检查 AssessmentDialog 引入与 defineExpose')
    return
  }
  dlg.value.open({ assetId: node.id })
}

function openEditAssessment(row) {
  if (!dlg.value?.open) {
    console.warn('dlg.open 不存在，检查 AssessmentDialog 引入与 defineExpose')
    return
  }
  // 注意：row 必须是“评估”行，且包含 id/assetId 等字段
  // 如果这里传的是备件行，需要先查该备件对应的评估记录，再传入
  dlg.value.open(row)
}
</script>

<style scoped>
.device-node{margin-top:6px;margin-left:20px;padding-left:10px;border-left:none}
.device-header{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #eaeaea;border-radius:6px;padding:6px 12px;transition:background .2s,box-shadow .2s}
.device-header:hover{background:#f5f7fa;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.device-left{display:flex;align-items:center;cursor:pointer;user-select:none}
.expand-icon{margin-right:6px;color:#909399}
.device-name{font-weight:500;font-size:14px;color:#303133}
.device-actions{flex-shrink:0}
.device-children{margin-top:8px;margin-left:24px}
.spare-card{margin-top:10px;background:#fff;border-radius:6px}
.spare-header{font-weight:600;font-size:13px;color:#606266}
.fade-enter-active,.fade-leave-active{transition:all .2s}
.fade-enter-from,.fade-leave-to{opacity:0;transform:translateY(-4px)}
</style>
